---
title: Utiliser des polices personnalisées
description: Vous souhaitez ajouter des polices de caractères personnalisées à un site Astro ? Utiliser Google Fonts avec Fontsource ou ajouter une police de votre choix.
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';


Ce guide vous montrera comment ajouter des polices web à votre projet et les utiliser dans vos composants.

## Utilisation d'un fichier d'une police locale

Cet exemple démontre l'ajout d'une police personnalisée en utilisant le fichier de police `DistantGalaxy.woff`.

1. Ajoutez votre fichier de police à `public/fonts/`.
2. Ajoutez la déclaration `@font-face` suivante à votre CSS. Cela peut être dans un fichier `.css` global que vous importez, un bloc `<style is:global>`, ou un bloc `<style>` dans une mise en forme (layout) ou un composant spécifique où vous voulez utiliser cette police.

    ```css
    /* Enregistrer notre famille de polices personnalisée et indiquer au navigateur où la trouver. */
    @font-face {
      font-family: 'DistantGalaxy';
      src: url('/fonts/DistantGalaxy.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    ```

3. Utilisez la valeur `font-family` de l'instruction `@font-face` pour styliser les éléments de votre composant ou de votre mise en forme (layout). Dans cet exemple, le titre `<h1>` aura la police personnalisée appliquée, alors que le paragraphe `<p>` ne l'aura pas.

    ```astro title="src/pages/example.astro" {9-11}
    ---
    ---

    <h1>Dans une galaxie très, très lointaine...</h1>

    <p>Les polices personnalisées rendent mes en-têtes beaucoup plus cool !</p>

    <style>
    h1 {
      font-family: 'DistantGalaxy', sans-serif;
    }
    </style>
    ```

## Utilisation de Fontsource

Le projet [Fontsource](https://fontsource.org/) simplifie l'utilisation de Google Fonts et d'autres polices open source. Il fournit les modules npm que vous pouvez installer pour les polices que vous souhaitez utiliser.

1. Trouvez la police que vous souhaitez dans le [catalogue Fontsource](https://fontsource.org/fonts). Pour cet exemple, on utilisera la police [Twinkle Star](https://fontsource.org/fonts/twinkle-star).
2. Installez le paquet pour la police que vous avez choisie.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @fontsource/twinkle-star
      ```
      </Fragment>
    </PackageManagerTabs>

    :::tip
    Vous trouverez le nom du paquet correct dans la section "Quick Installation" (installation rapide) de chaque page de police sur le site Web de Fontsource. Il commencera par `@fontsource/` suivi du nom de la police.
    :::

3. Importez le paquet de polices dans le composant où vous souhaitez utiliser la police. Généralement, vous voudrez le faire dans un composant de mise en forme commun pour vous assurer que la police est disponible sur l'ensemble de votre site.

    L'importation ajoutera automatiquement les règles `@font-face` nécessaires pour configurer la police.

    ```astro title="src/layouts/BaseLayout.astro"
    ---
    import '@fontsource/twinkle-star';
    ---
    ```

4. Utilisez le nom de la police comme indiqué dans l'exemple `body` sur sa page Fontsource comme valeur `font-family`. Cela fonctionnera partout où vous pouvez écrire du CSS dans votre projet Astro.

    ```css
    h1 {
      font-family: "Twinkle Star", cursive;
    }
    ```

## Rajoutez des polices avec TailwindCSS

Si vous utilisez l'intégration [Tailwind](/fr/guides/integrations-guide/tailwind/), vous pouvez utiliser l'une ou l'autre des méthodes précédentes de cette page pour installer votre police, avec quelques modifications. Vous pouvez soit ajouter une déclaration [`@font-face` pour une police locale](#utilisation-dun-fichier-dune-police-locale) ou utiliser la stratégie [Fontsource's `import`](#utilisation-de-fontsource) pour installer votre police.

Pour enregistrer votre police dans Tailwind :

1. Suivez l'un ou l'autre des guides ci-dessus, mais sautez l'étape finale qui consiste à ajouter `font-family` à votre CSS.
2. Ajoutez le nom de la police à `tailwind.config.cjs`.

    Cet exemple ajoute `Inter` à la pile de polices sans-serif, avec les polices de repli par défaut de Tailwind CSS.

    ```js title="tailwind.config.cjs" ins={1,7-9}
    const defaultTheme = require("tailwindcss/defaultTheme");

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', ...defaultTheme.fontFamily.sans],
          },
        },
      },
      plugins: [],
    }
    ```

    Maintenant, tout le texte sans-serif (le texte par défaut de Tailwind) dans votre projet utilisera la police choisie et la classe `font-sans` appliquera également la police Inter.

Voir la documentation de [Tailwind sur l'ajout de polices personnalisées](https://tailwindcss.com/docs/font-family#using-custom-values) pour plus d'information.

## Plus de ressources

- Apprendre comment fonctionnent les polices web dans le [Guide des polices web de MDN](https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts).
- Générez du CSS pour votre police avec [Font Squirrel's Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator).
